<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px">
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="外壳编号">
        <el-input @change="searchChange" v-model="formData.shellId" placeholder="外壳编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="操作人">
        <el-input @change="searchChange" v-model="formData.createBy" placeholder="操作人" clearable></el-input>
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formData.deviceType" @change="searchChange" placeholder="设备类型" clearable>
          <el-option key="1" label="电动自行车" value="0"></el-option>
          <el-option key="2" label="充电汽车" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作方式">
        <el-select v-model="formData.type" @change="searchChange" placeholder="操作方式" clearable>
          <el-option key="1" label="移入站点" value="1"></el-option>
          <el-option key="2" label="移出站点" value="0"></el-option>
          <el-option key="3" label="设备收回" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <avue-crud ref="crud"
      :page="page"
      :data="datalist"
      :table-loading="dataListLoading"
      :option="tableOption"
      @size-change="sizeChange"
      @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div>充电桩编号：{{ scope.row.code }}</div>
        <div>外壳条码Id：{{ scope.row.shellId }}</div>
        <div>SIM卡ID：{{ scope.row.iccid }}</div>
        <div>类型：{{ scope.row.chargingTypeName }}</div>
        <div>是否安装：{{ scope.row.chargingGroupId?'是':'否' }}</div>
        <div>信号强度：{{ scope.row.qos }}</div>
        <div>创建时间：{{ scope.row.createDate }}</div>
      </template>
      <template slot-scope="scope" slot="operationInfo">
        <div>操作人：{{ scope.row.operationBy }}</div>
        <div>操作时间：{{ scope.row.operationTime }}</div>
        <div>操作方式：{{ scope.row.operationMethod }}</div>
      </template>
      <template slot-scope="scope" slot="addInfo">
        <div v-if="scope.row.type == 1">站点编号：{{ scope.row.chargingGroupId }}</div>
        <div v-if="scope.row.type == 1">站点名称：{{ scope.row.chargingGroupName }}</div>
      </template>
      <template slot-scope="scope" slot="moveInfo">
        <div v-if="scope.row.type == 0 || scope.row.type == 2">站点编号：{{ scope.row.chargingGroupId }}</div>
        <div v-if="scope.row.type == 0 || scope.row.type == 2">站点名称：{{ scope.row.chargingGroupName }}</div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableOption } from '@/crud/pile/operationLog'
export default {
  data() {
    return {
      formData: {
        code: '',   // 编号
        shellId: '',  // 外壳
        createBy: '',  // 操作人
        type: '',  // 操作方式
        createDate: '',  // 时间
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableOption: tableOption,
      datalist: [],
      dataListLoading: false,
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList (page, params) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/charging/operation/log'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(res => {
        console.log(res.data.data)
        this.datalist = res.data.data.records
        this.page.total = res.data.data.total
        this.dataListLoading = false
      })
    },

    // 条件查询
    searchChange() {
      if(this.formData.createDate&&this.formData.createDate.length > 0) {
        this.formData.startTime = this.formData.createDate[0]
        this.formData.endTime = this.formData.createDate[1]
      }
      else {
        this.formData.startTime = ''
        this.formData.endTime = ''
      }
      this.page.currentPage=1
      this.getDataList(this.page, this.formData)
    },

    sizeChange(val){
      this.page.pageSize=val
      this.getDataList(this.page, this.formData)
    },
    currentChange(val){
      this.page.currentPage=val
      this.getDataList(this.page, this.formData)
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
